<template>
    <div class="table-box">
        <ProTable ref="proTable" :requestApi="api.getList" :columns="columns">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
                    @click="onBatchRemove(scope.ids)">
                    批量删除参数
                </el-button>
            </template>
            <template #content="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div v-html="scope.row.content"></div>
            </template>
            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button>
            </template>
        </ProTable>
    </div>
</template>

<script setup lang="tsx" name="operationLog">

import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Delete } from "@element-plus/icons-vue";

import { useHandleData } from "/@/hooks/useHandleData";
import { useDownload } from "/@/hooks/useDownload";

import FormDialog from "./components/FormDialog.vue";

import * as api from "/@/api/logger/operationLog";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 自定义渲染头部(使用tsx语法)
const renderHeader = (scope: any) => {
    return (
        <el-button
            type="primary"
            onClick={() => {
                console.log(scope);
                ElMessage.success("我是自定义表头");
            }}
        >
            {scope.row.label}
        </el-button>
    );
};

// 获取表头信息
const columns = columnsFunction(renderHeader);


// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { id: params.id }, `删除【${params.name}】参数`);
    proTable.value.refresh();
};


// 批量删除用户信息
const onBatchRemove = async (ids: string[]) => {
    await useHandleData(api.remove, { ids }, "删除所选参数信息");
    proTable.value.refresh();
};
</script>
